<template>
  <div class="app-container pb-10">
    <el-card>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">头像:</div>
            <div class="text-14px ml-3">
              <el-image preview-teleported style="width: 60px; height: 60px" :src="user?.avatar" :zoom-rate="1.2"
                :max-scale="7" :min-scale="0.2" :preview-src-list="[user?.avatar]" :initial-index="1"
                fit="cover"></el-image>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">用户姓名:</div>
            <div class="text-14px ml-3">
              {{ user?.name }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">用户手机号:</div>
            <div class="text-14px ml-3">
              {{ user?.tel }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">余额:</div>
            <div class="text-14px ml-3">
              {{ user?.balance }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">身份证:</div>
            <div class="text-14px ml-3">
              {{ user.card }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">银行名称:</div>
            <div class="text-14px ml-3">
              {{ user.bank }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">开户行:</div>
            <div class="text-14px ml-3">
              {{ user.opening_bank }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">银行卡号:</div>
            <div class="text-14px ml-3">
              {{ user.bank_code }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">地址:</div>
            <div class="text-14px ml-3">
              {{ user.address }}
            </div>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">状态:</div>
            <div class="text-14px ml-3">
              {{ user.status == 0 ? '启用' : '禁用' }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">会员类型:</div>
            <div class="text-14px ml-3">
              <template v-if="user.is_vip == 1">
                <div v-if="user.vip_type == 0">月</div>
                <div v-if="user.vip_type == 1">年</div>
                <div v-if="user.vip_type == 2">永久</div>
              </template>
              <template v-else>
                <div>无</div>
              </template>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">会员到期时间:</div>
            <div class="text-14px ml-3">
              <span v-if="user.vip_end_time">
                {{ formatTimestamp(user.vip_end_time * 1000) }}</span>
              <span v-else>无</span>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">创建时间:</div>
            <div class="text-14px ml-3">
              {{ formatTimestamp(user.CreatedAt * 1000) }}
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="font-bold text-center mb-5 mt-8">我的发布</div>
        </el-col>
        <el-col :span="24">
          <div class="font-bold !w-120px text-right mb-3 mt-3">人脉圈:</div>
          <el-table :data="info.rmq" style="width: 100%" border>
            <el-table-column label="头像" align="center" prop="title" width="150">
              <template #default="{ row }">
                <el-image preview-teleported style="width: 60px; height: 60px" :src="row.avatar" :zoom-rate="1.2"
                  :max-scale="7" :min-scale="0.2" :preview-src-list="[row.avatar]" :initial-index="1"
                  fit="cover"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="姓名" align="center" prop="name" />
            <el-table-column label="手机号码" align="center" width="150">
              <template #default="{ row }">
                <span @click="handleProjectInfo(row.id)" class="text-[#4080FF] cursor-pointer">{{ row.tel }}</span>
              </template>
            </el-table-column>
            <el-table-column label="发布时间" align="center" width="180">
              <template #default="scope">
                <span v-if="scope.row.created_at > 0">
                  {{ formatTimestamp(scope.row.created_at * 1000) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="积累收益" align="center" prop="sum_profit_price" />
            <el-table-column label="未提取收益金额" align="center" prop="profit_price" />
          </el-table>
        </el-col>
        <el-col :span="24">
          <div class="font-bold !w-120px text-right  mb-3 mt-3">项目库/合伙人:</div>
          <el-table :data="info.project" style="width: 100%" border>
            <el-table-column label="缩略图" align="center" prop="title" width="150">
              <template #default="{ row }">
                <el-image preview-teleported style="width: 60px; height: 60px" :src="row.image" :zoom-rate="1.2"
                  :max-scale="7" :min-scale="0.2" :preview-src-list="[row.image]" :initial-index="1"
                  fit="cover"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="项目名" align="center" prop="name" />
            <el-table-column label="手机号码" align="center" width="150">
              <template #default="{ row }">
                <span @click="handleProjectInfo(row.id)" class="text-[#4080FF] cursor-pointer">{{ row.tel }}</span>
              </template>
            </el-table-column>
            <el-table-column label="发布时间" align="center" width="180">
              <template #default="scope">
                <span v-if="scope.row.created_at > 0">
                  {{ formatTimestamp(scope.row.created_at * 1000) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="类型" align="center" prop="city" width="100">
              <template #default="scope">
                <span v-if="scope.row.project_type == 0">项目库</span>
                <span v-else-if="scope.row.project_type == 1">合伙人</span>
              </template>
            </el-table-column>
            <el-table-column label="积累收益" align="center" prop="sum_profit_price" />
            <el-table-column label="未提取收益金额" align="center" prop="profit_price" />
          </el-table>
        </el-col>



        <el-col :span="24">
          <div class="font-bold text-center mb-5 mt-8">消费记录</div>
        </el-col>
        <el-col :span="24">
          <el-table :data="info.money_log" style="width: 100%" border>
            <el-table-column prop="name" label="类型" align="center">
              <template #default="{ row }">
                {{ consumption(row) }}
              </template>
            </el-table-column>
            <el-table-column label="消费时间" align="center">
              <template #default="scope">
                <span v-if="scope.row.created_at > 0">
                  {{ formatTimestamp(scope.row.created_at * 1000) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="金额" align="center">
              <template #default="{ row }">
                {{ row.is_recharge == 1 ? '+' : '-' }}{{ row.price }}
              </template>
            </el-table-column>
          </el-table>
        </el-col>

        <el-col :span="24">
          <div class="font-bold text-center mb-5 mt-8">邀请记录</div>
        </el-col>
        <el-col :span="24">
          <el-table :data="info.yq_user" style="width: 100%" border>
            <el-table-column prop="name" label="姓名" align="center" />
            <el-table-column prop="tel" label="手机号" align="center" />
            <el-table-column label="是否会员" align="center" prop="is_vip">
              <template #default="scope">
                <el-tag :type="scope.row.is_vip == 1 ? 'success' : 'info'">
                  {{ scope.row.is_vip == 1 ? "是" : "否" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="是否会员" align="center" prop="is_vip">
              <template #default="{ row }">
                <template v-if="row.is_vip == 1">
                  <div v-if="row.vip_type == 0">月</div>
                  <div v-if="row.vip_type == 1">年</div>
                  <div v-if="row.vip_type == 2">永久</div>
                </template>
                <template v-else>
                  <div>无</div>
                </template>
              </template>
            </el-table-column>
            <el-table-column label="会员到期时间" align="center">
              <template #default="scope">
                <span v-if="scope.row.vip_end_time > 0">
                  {{ formatTimestamp(scope.row.vip_end_time * 1000) }}
                </span>
                <span v-else>无</span>
              </template>
            </el-table-column>
            <el-table-column prop="yf_price" label="已返佣金额" align="center" />
            <el-table-column prop="yj" label="总佣金" align="center" />
          </el-table>
        </el-col>

      </el-row>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import UserAPI from "@/api/userList";
import TradeAPI from "@/api/tradeLog";
import { useRoute } from "vue-router";
import router from "@/router";
const route = useRoute();
import { formatTimestamp } from '@/utils/index'

// 跳转项目详情
const handleProjectInfo = (id: number) => {
  router.push({ name: 'PartnerInfo', query: { id: id } });
}

const consumption = (item: any) => {
  let content = ''
  if (item.is_add == 1) {
    return content = item.is_type == 1 ? '项目库/合伙人发布' : '人脉圈发布'
  } else if (item.is_show == 1) {
    return content = item.is_type == 1 ? '查看项目库/合伙人' : '查看人脉圈'
  } else if (item.is_vip == 1) {
    return content = '充值会员'
  } else if (item.is_withdrawal == 1) {
    return content = '提现'
  } else if (item.is_recharge == 1) {
    return content = '充值余额'
  }

  return content
}

const user = ref<any>({});
const info = ref<any>({})
const getDataInfo = () => {
  UserAPI.getFormData({ id: route.query.id }).then((data) => {
    user.value = { ...data.user }
    info.value = { ...data };
  });
}

const form = ref<any>({
  type: 'commit'
});
/** 用户表单校验规则  */
const rules = reactive<any>({});

watch(
  () => form.value.type,
  newValue => {

    if (newValue == 'commit') {
      rules.image = [{ required: true, message: "通过必须转账截图", trigger: ["change", "blur"] }]
    } else {
      rules.image = []
    }
  },
  { immediate: true }
);

/**  弹窗对象  */
const dialog = reactive({
  visible: false,
  title: "审核",
});

/** 关闭弹窗 */
function handleCloseDialog() {
  dialog.visible = false;
}

// 打开审核
const handleAudit = (type: string) => {
  form.value.type = type;
  dialog.visible = true;
}

// 提交审核
const userFormRef = ref(ElForm);
const handleSubmit = () => {
  userFormRef.value.validate((valid: any) => {
    if (valid) {
      form.value.id = info.value.id
      form.value.image = form.value.image.join(',');
      TradeAPI.getWithdrawalAudit(form.value).then(res => {
        getDataInfo();
        dialog.visible = false;
      })
    }
  })
}

onMounted(() => {
  getDataInfo();
});
</script>
